.star-resize-box {
  position: relative;
  user-select: none;
}
.star-resize-line {
  width: 5px;
  position: absolute;
  background-color: transparent;
  &.line-e {
    height: 100%;
    left: 0px;
    cursor: ew-resize;
  }
  &.line-n {
    height: 100%;
    right: 0px;
    cursor: ew-resize;
  }

  &.line-w {
    width: 100%;
    height: 5px;
    top: 0px;
    cursor: ns-resize;
  }

  &.line-s {
    width: 100%;
    height: 5px;
    bottom: 0px;
    cursor: ns-resize;
  }
}

.star-resize-point {
  background-color: red;
  height: 5px;
  opacity: 0.75;
  width: 5px;
  position: absolute;

  &.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
  }
  &.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
  }

  &.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
  }
  &.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
  }
  &.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
  }

  &.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
  }

  &.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
  }

  &.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    right: -3px;
  }
}
